import {
  ref,
  onMounted,
  onBeforeUnmount,
} from "vue"

export default function useClickPosition() {
  const x = ref(-1)
  const y = ref(-1)

  const handleClick = (event: MouseEvent) => {
      console.log('------')
      x.value = event.pageX
      y.value = event.pageY
    }

  // 在组件初始化后, 给页面绑定点击监听, 收集点击的坐标
  onMounted(() => {
    document.addEventListener('click', handleClick)
  })

  // 在组件死亡前, 解绑监听
  onBeforeUnmount(() => {
    document.removeEventListener('click', handleClick)
  })
  
  return {
    x,
    y,
  }
}